<script setup lang="ts">
import unauthorizedError from '@/assets/images/error_images/401.png';
import pageError from '@/assets/images/error_images/404.svg';
import networkError from '@/assets/images/error_images/500.svg';
import noPermission from '@/assets/images/error_images/403.svg';
import { propTypes } from '@/utils/propTypes';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();

interface ErrorMap {
  url: string;
  message: string;
  buttonText: string;
}

const errorMap: {
  [key: string]: ErrorMap;
} = {
  '401': {
    url: unauthorizedError,
    message: t('error.unauthorizedError'),
    buttonText: t('error.logInBack')
  },
  '404': {
    url: pageError,
    message: t('error.pageError'),
    buttonText: t('error.returnToHome')
  },
  '403': {
    url: noPermission,
    message: t('error.noPermission'),
    buttonText: t('error.returnToHome')
  },
  '500': {
    url: networkError,
    message: t('error.networkError'),
    buttonText: t('error.')
  }
};

const props = defineProps({
  type: propTypes.string
    .validate((v: string) => ['401', '404', '403', '500'].includes(v))
    .def('404')
});

const emit = defineEmits(['errorClick']);
const btnClick = () => {
  emit('errorClick', props.type);
};
</script>
<template>
  <div class="container">
    <div class="text-center">
      <img width="350" :src="errorMap[type].url" alt="" />
      <div class="text-14px text-[var(--el-color-info)]">{{ errorMap[type].message }}</div>
      <div class="mt-20px">
        <el-button type="primary" @click="btnClick">{{ errorMap[type].buttonText }}</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/*https://www.tailwindcss.cn/docs/background-image*/
/*tailwindcss --css原子化插件 */

.container {
  display: flex;
  justify-content: center;
  .text-center {
    text-align: center;
  }
  .text-14px {
    font-size: 14px;
  }
  .text-\[var\(--el-color-info\)\] {
    color: var(--el-color-info);
  }
  .mt-20px {
    margin-top: 20px;
  }
}
</style>
